<template>
  <div class="header">
    <div class="header__back iconfont" @click="handleBackClick">&#xe6db;</div>
    <div class="header__title">{{ headline }}</div>
    <div class="header__setAddress" @click="handleSaveClick" v-if="!isNext">
      {{ next }}
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
const useClickEffect = (emit) => {
  const router = useRouter();
  const handleBackClick = () => {
    router.back();
  };
  const handleSaveClick = () => {
    emit("handleNextClick");
  };
  return { handleBackClick, handleSaveClick };
};
export default {
  name: "hederPage",
  props: ["headline", "next", "isNext"],
  setup(props, context) {
    const { emit } = context;
    const { handleBackClick, handleSaveClick } = useClickEffect(emit);
    return { handleSaveClick, handleBackClick };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
.header {
  display: flex;
  height: 0.44rem;
  background-color: $color-fff;
  padding: 0 0.18rem;
  align-items: center;
  &__back {
    font-size: 0.2rem;
    color: #b6b6b6;
  }
  &__title {
    flex: 1;
    text-align: center;
    font-size: 0.16rem;
    color: $content-fontcolor;
  }
  &__setAddress {
    color: $content-fontcolor;
    font-size: 0.14rem;
  }
}
</style>